<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background: #000;
				/* 弹性布局 */
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				margin: 0;
			}
			a{				
				color: #fff;/* 文本颜色 */				
				text-decoration: none;/* 文本修饰 */				
				background: linear-gradient(to right,#409eff,#1afc93,#ffcc33,#ff7272);/* 背景色 */				
				position: absolute;/* 定位 ：定位元素支持宽高 */				
				width: 400px;/* 宽度 */				
				line-height: 100px;/* 行高 */
				font-size: 24px;/* 字体大小 */
				text-align: center;/* 文字水平居中 */
				border-radius: 50px;/*圆角半径*/
				background-size: 400%;/*背景大小*/
			}
		</style>
	</head>
	<body>
		<a href="#">SUNBUTTON</a>
	</body>
</html>
